<template>
  <div>
    <h1>菜单管理系统</h1>
    <!-- 按钮   -->
    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleEdit(0)">添加</el-button>
    <el-button type="success" size="small" icon="el-icon-edit" @click="handleEdit(1)">修改</el-button>
    <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete()">删除</el-button>
    <!--列表     -->
    <el-table
      ref="multipleTable"
      tooltip-effect="dark"
      :data="tableData"

      style="width: 100%;margin-bottom: 20px;"
      row-key="menuId"
      border
      :tree-props="{children: 'sysMenuList'}"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        type=""
        prop="menuId"
        label="菜单ID"
        width="120"
      />
      <el-table-column
        prop="name"
        label="菜单名称"
        width="180"
      />
      <!--循环判断这行的父类id和菜单id相等 展示出该菜单的名称     -->
      <!--    <el-table-column
        prop="parentId"
        label="上级菜单"
        width="180">
      <template slot-scope="scope">
        <span v-for="menu in tableData">
            <span v-if="scope.row.parentId==menu.menuId">{{menu.name}}</span>
        </span>
      </template>
    </el-table-column>-->
      <el-table-column
        prop="parentName"
        label="上级菜单"
        width="180"
      />
      <el-table-column
        prop="icno"
        label="图标"
        width="100"
      />
      <el-table-column
        prop="type"
        label="类型"
        width="180"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.type==0">
            <el-button type="primary" size="mini">目录</el-button>
          </span>
          <span v-if="scope.row.type==1">
            <el-button type="success" size="mini">菜单</el-button>
          </span>
          <span v-if="scope.row.type==2">
            <el-button type="warning" size="mini">按钮</el-button>
          </span>
          <!--        {{scope.row.type==0?'目录':scope.row.type==1?'菜单':'按钮'}}-->
        </template>
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序号"
        width="120"
      />
      <el-table-column
        prop="url"
        label="菜单URL"
        width="250"
      />
      <el-table-column
        prop="perms"
        label="授权标识"
        width="300"
      />
    </el-table>
    <!--分页     -->
    <el-pagination
      background
      :current-page="pageNum"
      :page-sizes="[8, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'SysMenuList',
  data() {
    return {
      // 列表
      tableData: [],
      // 分页
      pageNum: 1,
      pageSize: 8,
      total: 0,
      // 多选框
      multipleSelection: [],
      // 删除存储id值
      mids: []
    }
  },
  created() {
    this.MenuList()
  },
  methods: {
    // 列表
    MenuList() {
      this.axios.get('http://localhost:9999/system-management/sysMenu/list', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then((response) => {
        console.log(response.data)
        this.tableData = response.data.obj.list
        this.total = response.data.obj.total
      })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.MenuList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNum = val
      this.MenuList()
    },
    // 全选全不选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 添加编辑
    handleEdit(row) {
      // 判断是添加还是修改
      if (row === 1) {
        // 判断修改只能选择一条数据
        if (this.multipleSelection.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择要修改的内容',
            type: 'warning'
          })
          // alert('请选择要修改的内容')
          return
        } else if (this.multipleSelection.length > 1) {
          this.$message({
            showClose: true,
            message: '只能选择一条数据',
            type: 'warning'
          })
          // alert('只能选择一条数据')
          return
        }
        // 修改  跳页面传参数
        // localStorage.setItem('menuId', this.multipleSelection[0].menuId)
        // this.$router.replace({ 'path': '/add' })
        var menuId = this.multipleSelection[0].menuId
        this.$router.push({
          path: 'MenuEdit',
          query: {
            menuId: menuId
          }
        })
      } else {
        // 添加
        // this.$router.replace({ 'path': '/add' })
        this.$router.push({
          path: 'MenuEdit',
          query: {
            menuId: 0
          }
        })
        // localStorage.setItem('menuId', 0)
      }
    },
    // 删除
    handleDelete() {
      // 判断是否选中
      if (this.multipleSelection.length > 0) {
        // 分割
        var mids = this.multipleSelection.map(row => row.menuId).join(',')
        // 删除
        this.axios.get('http://localhost:9999/system-management/sysMenu/delete', {
          params: {
            mids: mids
          }
        }).then((response) => {
          console.log(response.data)
          // 判断
          if (response.data.code === '200') {
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            })
            this.MenuList()
          } else {
            // alert(response.data.msg)
            this.$message({
              showClose: true,
              message: '删除失败',
              type: 'error'
            })
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: 'warning'
            })
            this.MenuList()
          }
        })
      } else {
        this.$message({
          showClose: true,
          message: '请选择你要删除的数据',
          type: 'warning'
        })
      }
    }
  }

}
</script>

<style scoped>

</style>
